<template>
	<view :id="wavesId" :class="['waves',{isDisable}, itemClass]" @tap.stop="onTap($event)">
		<slot></slot>
		<view class="wavesHover" v-if="wavesHover && !isDisable"></view>
		<view class="waves-ripple" :class="{ 'active': active }" :style="{
				top: rippleTop + 'px',
				left: rippleLeft + 'px',
				width: field.finalWidth + 'px',
				height: field.finalWidth + 'px',
				'background-color': wavesColor
			}"></view>
	</view>
</template>

<script>
	let wavesId = 0;
	export default {
		props: {
			wavesColor: {
				type: String,
				default: 'rgba(255, 255, 255, .50)'
			},
			itemClass: {
				type: String,
				default: ''
			},
			wavesHover: {
				type: Boolean,
				default: true
			},
			isDisable: {
				type: Boolean,
				default: false
			}
		},
		data() {
			wavesId++;
			return {
				rippleTop: 0,
				rippleLeft: 0,
				field: {
					finalWidth: 0,
				},
				active: Boolean,
				wavesId: 'waves_' + wavesId
			};
		},
		methods: {
			onTap(e) { // 点击事件
				if (this.isDisable) return
				this.$emit('onTap');
				this.active = false;
				this.$nextTick(() => {
					this.activeWaves(e);
				});
			},
			onTouchstart(e) { // 触碰事件 触发波纹
			},
			activeWaves(e) {
				this.getClientRect().then(data => {
					if (!data.height) {
						return;
					};
					data.finalWidth = data.height > data.width ? data.height : data.width;
					if (!data.finalWidth) {
						return;
					};
					this.field = data;
					let touchesX;
					let touchesY;
					// #ifdef MP-BAIDU
					touchesX = e.changedTouches[0].clientX;
					touchesY = e.changedTouches[0].clientY;
					// #endif
					// #ifdef MP-ALIPAY
					touchesX = e.detail.clientX;
					touchesY = e.detail.clientY;
					// #endif
					// #ifndef MP-BAIDU || MP-ALIPAY
					touchesX = e.touches[0].clientX;
					touchesY = e.touches[0].clientY;
					// #endif
					this.rippleTop = touchesY - data.top - data.finalWidth / 2;
					this.rippleLeft = touchesX - data.left - data.finalWidth / 2;
					this.$nextTick(() => {
						this.active = true;
					});
				});
			},
			getClientRect() {
				return new Promise(callback => {
					setTimeout(() => {
						let query = uni.createSelectorQuery().in(this);
						let id = '#' + this.wavesId;
						query.select(id).boundingClientRect(data => {
							callback(data);
						}).exec();
					}, 0)
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.waves {
		min-height: 2.572em;
		cursor: pointer;
		position: relative;
		overflow: hidden;

		.waves-ripple {
			position: absolute;
			border-radius: 100%;
			background-clip: padding-box;
			pointer-events: none;
			user-select: none;
			transform: scale(0);
			opacity: 1;
		}

		.active {
			border-radius: inherit;
			opacity: 0;
			transform: scale(2);
			transition: opacity .3s ease-out, transform 0.5s ease-out;
		}

	}

	.isDisable {
		opacity: .7;
		cursor: not-allowed;
	}

	.waves .wavesHover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		border-radius: inherit;
		opacity: 0;
		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
	}

	.waves:hover .wavesHover {
		background: currentColor;
		opacity: 0.15;
	}
</style>